<script setup>
import {
  DesktopOutlined,
  HomeOutlined,
  QuestionCircleOutlined,
  TableOutlined,
  TagsOutlined,
  UnorderedListOutlined,
  ReadOutlined,
  FormOutlined,
  AlignLeftOutlined,
  FileTextOutlined,
  LayoutOutlined,
  DatabaseOutlined,
  ExperimentOutlined
} from "@ant-design/icons-vue";

const router = useRouter();
const route = useRoute();

const handleSelect = ( event ) => {
  router.push( event.key );
  if ( event.keyPath.length > 0 ) {
    openKeys.value.push( event.keyPath[0] );
    selectedKeys.value.push( event.keyPath[1] );
  }
}
const selectedKeys = ref( [] );
const openKeys = ref( [] );
const menuItem = reactive( [
  {
    key : '/home',
    title : '首页',
    label : '首页',
    icon : () => h( HomeOutlined ),
    children : [
      {
        key : '/home/index',
        title : '数据报表',
        label : '数据报表',
        icon : () => h( DesktopOutlined ),
      },
      {
        key : '/home/introduction',
        title : '系统介绍',
        label : '系统介绍',
        icon : () => h( ReadOutlined ),
      },
    ],
  },
  {
    key : '/user',
    title : '用户管理',
    label : '用户管理',
    icon : () => h( TableOutlined ),
    children : [
      {
        key : '/user/list',
        title : '用户列表',
        label : '用户列表',
        icon : () => h( UnorderedListOutlined ),
      },
    ],
  },
  {
    key : '/tags',
    title : '标签管理',
    label : '标签管理',
    icon : () => h( TagsOutlined ),
    children : [
      {
        key : '/tags/list',
        title : '标签列表',
        label : '标签列表',
        icon : () => h( UnorderedListOutlined ),
      },
    ],
  },
  {
    key : '/notice',
    title : '消息管理',
    label : '消息管理',
    icon : () => h( AlignLeftOutlined ),
    children : [
      {
        key : '/notice/list',
        title : '消息列表',
        label : '消息列表',
        icon : () => h( UnorderedListOutlined ),
      },
    ],
  },
  {
    key : '/test',
    title : '测试',
    label : '测试',
    icon : () => h( QuestionCircleOutlined ),
    children : [
      {
        key : '/test/table',
        title : '表格测试',
        label : '表格测试',
        icon : () => h( TableOutlined ),
      },
      {
        key : '/test/form',
        title : '表单测试',
        label : '表单测试',
        icon : () => h( FormOutlined ),
      },
      {
        key : '/test/customDirective',
        title : '自定义指令',
        label : '自定义指令',
        icon : () => h( FileTextOutlined ),
      },
      {
        key : '/test/testDisplay',
        title : '钩子测试',
        label : '钩子测试',
        icon : () => h( LayoutOutlined ),
      },
      {
        key : '/test/testPinia',
        title : 'piniaDemo',
        label : 'piniaDemo',
        icon : () => h( LayoutOutlined ),
      },
      {
        key : '/test/testThree',
        title : 'three测试',
        label : 'three',
        icon : () => h( LayoutOutlined ),
      },
      {
        key : '/test/testBigNumber',
        title : 'testBigNumber',
        label : 'BigNumber',
        icon : () => h( LayoutOutlined ),
      },
      {
        key : '/test/testRegion',
        title : 'region测试',
        label : 'Vue原生组件',
        icon : () => h( LayoutOutlined ),
      },
      {
        key : '/test/testVue',
        title : 'Vue测试',
        label : '测试',
        icon : () => h( ExperimentOutlined ),
      },
      {
        key : '/test/testTransition',
        title : 'Vue过渡动画',
        label : '过渡',
        icon : () => h( ExperimentOutlined ),
      },
      {
        key : '/test/testKeepAlive',
        title : 'KeepAlive',
        label : 'KeepAlive',
        icon : () => h( ExperimentOutlined ),
      },
      {
        key : '/test/testVueUse',
        title : 'VueUse',
        label : 'VueUse测试',
        icon : () => h( ExperimentOutlined ),
      }
    ],
  },
  {
    key : '/g2',
    title : 'G2',
    label : 'G2',
    icon : () => h( QuestionCircleOutlined ),
    children : [
      {
        key : '/g2/index',
        title : 'G2数据可视化',
        label : 'G2数据可视化',
        icon : () => h( DatabaseOutlined ),
      },
    ],
  }
] );

onMounted( () => {
  // console.log(router.options.routes);
} );
watchEffect( () => {
  if ( route.matched && route.matched.length > 1 ) {
    selectedKeys.value = [ route.matched[1].path ];
    openKeys.value = [ route.matched[0].path ];
  }
} );

</script>

<template>
  <div>
    <a-menu
        mode="inline"
        v-model:selected-keys="selectedKeys"
        v-model:open-keys="openKeys"
        @select="handleSelect"
        :items="menuItem"
    ></a-menu>
  </div>
</template>

<style scoped>

</style>